<!--
/**
 * ToolBar 组件
 * 
 * 工具栏组件，提供工具选择和快捷操作
 * 
 * @author yangzhixin
 */
-->

<template>
  <div class="tool-bar" :class="{ vertical: vertical }">
    <q-btn-group :vertical="vertical" class="tool-group">
      <!-- 基础交互工具 -->
      <template v-if="showBasicTools">
        <q-btn
          v-for="tool in basicTools"
          :key="tool.name"
          :icon="tool.icon"
          :color="activeTool === tool.name ? 'primary' : 'grey-7'"
          :disable="!enabled"
          :flat="activeTool !== tool.name"
          :title="tool.label"
          @click="handleToolClick(tool.name)"
        >
          <q-tooltip>{{ tool.label }}</q-tooltip>
        </q-btn>
      </template>

      <!-- 分隔符 -->
      <div v-if="showBasicTools && showMeasurementTools" class="separator" />

      <!-- 测量工具 -->
      <template v-if="showMeasurementTools">
        <q-btn
          v-for="tool in measurementTools"
          :key="tool.name"
          :icon="tool.icon"
          :color="activeTool === tool.name ? 'primary' : 'grey-7'"
          :disable="!enabled"
          :flat="activeTool !== tool.name"
          :title="tool.label"
          @click="handleToolClick(tool.name)"
        >
          <q-tooltip>{{ tool.label }}</q-tooltip>
        </q-btn>
      </template>

      <!-- 分隔符 -->
      <div v-if="showMeasurementTools && showAnnotationTools" class="separator" />

      <!-- 标注工具 -->
      <template v-if="showAnnotationTools">
        <q-btn
          v-for="tool in annotationTools"
          :key="tool.name"
          :icon="tool.icon"
          :color="activeTool === tool.name ? 'primary' : 'grey-7'"
          :disable="!enabled"
          :flat="activeTool !== tool.name"
          :title="tool.label"
          @click="handleToolClick(tool.name)"
        >
          <q-tooltip>{{ tool.label }}</q-tooltip>
        </q-btn>
      </template>

      <!-- 分隔符 -->
      <div v-if="showActions" class="separator" />

      <!-- 操作按钮 -->
      <template v-if="showActions">
        <q-btn
          icon="refresh"
          color="grey-7"
          flat
          :disable="!enabled"
          title="重置"
          @click="handleReset"
        >
          <q-tooltip>重置视口</q-tooltip>
        </q-btn>

        <q-btn
          icon="delete"
          color="grey-7"
          flat
          :disable="!enabled"
          title="清除标注"
          @click="handleClearAnnotations"
        >
          <q-tooltip>清除所有标注</q-tooltip>
        </q-btn>

        <q-btn
          icon="download"
          color="grey-7"
          flat
          :disable="!enabled"
          title="导出"
          @click="handleExport"
        >
          <q-tooltip>导出标注</q-tooltip>
        </q-btn>
      </template>
    </q-btn-group>

    <!-- 工具状态显示 -->
    <div v-if="showStatus && activeTool" class="tool-status">
      <span class="status-label">当前工具:</span>
      <span class="status-value">{{ getToolLabel(activeTool) }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

/**
 * 工具定义
 */
interface ToolDefinition {
  name: string;
  icon: string;
  label: string;
  shortcut?: string;
}

/**
 * 组件属性
 */
interface Props {
  /** 当前激活的工具 */
  activeTool?: string | null;
  /** 是否启用工具栏 */
  enabled?: boolean;
  /** 是否垂直布局 */
  vertical?: boolean;
  /** 是否显示基础工具 */
  showBasicTools?: boolean;
  /** 是否显示测量工具 */
  showMeasurementTools?: boolean;
  /** 是否显示标注工具 */
  showAnnotationTools?: boolean;
  /** 是否显示操作按钮 */
  showActions?: boolean;
  /** 是否显示状态 */
  showStatus?: boolean;
  /** 自定义工具列表 */
  customTools?: ToolDefinition[];
}

const props = withDefaults(defineProps<Props>(), {
  activeTool: null,
  enabled: true,
  vertical: false,
  showBasicTools: true,
  showMeasurementTools: true,
  showAnnotationTools: true,
  showActions: true,
  showStatus: false,
  customTools: () => [],
});

/**
 * 组件事件
 */
interface Emits {
  (e: 'tool-select', toolName: string): void;
  (e: 'reset'): void;
  (e: 'clear-annotations'): void;
  (e: 'export'): void;
}

const emit = defineEmits<Emits>();

/**
 * 基础交互工具
 */
const basicTools = ref<ToolDefinition[]>([
  {
    name: 'WindowLevel',
    icon: 'contrast',
    label: '窗宽窗位',
    shortcut: 'W',
  },
  {
    name: 'Pan',
    icon: 'pan_tool',
    label: '平移',
    shortcut: 'M',
  },
  {
    name: 'Zoom',
    icon: 'zoom_in',
    label: '缩放',
    shortcut: 'Z',
  },
  {
    name: 'StackScroll',
    icon: 'swap_vert',
    label: '滚动',
    shortcut: 'S',
  },
]);

/**
 * 测量工具
 */
const measurementTools = ref<ToolDefinition[]>([
  {
    name: 'Length',
    icon: 'straighten',
    label: '长度测量',
    shortcut: 'L',
  },
  {
    name: 'Angle',
    icon: 'show_chart',
    label: '角度测量',
    shortcut: 'A',
  },
  {
    name: 'Probe',
    icon: 'colorize',
    label: '探针',
    shortcut: 'P',
  },
]);

/**
 * 标注工具
 */
const annotationTools = ref<ToolDefinition[]>([
  {
    name: 'RectangleROI',
    icon: 'crop_square',
    label: '矩形ROI',
    shortcut: 'R',
  },
  {
    name: 'EllipticalROI',
    icon: 'panorama_fish_eye',
    label: '椭圆ROI',
    shortcut: 'E',
  },
  {
    name: 'CircleROI',
    icon: 'radio_button_unchecked',
    label: '圆形ROI',
    shortcut: 'C',
  },
  {
    name: 'ArrowAnnotate',
    icon: 'arrow_forward',
    label: '箭头标注',
    shortcut: 'T',
  },
  {
    name: 'FreehandROI',
    icon: 'gesture',
    label: '手绘ROI',
    shortcut: 'F',
  },
]);

/**
 * 所有工具列表（包含自定义工具）
 */
const allTools = computed(() => [
  ...basicTools.value,
  ...measurementTools.value,
  ...annotationTools.value,
  ...props.customTools,
]);

/**
 * 获取工具标签
 */
const getToolLabel = (toolName: string): string => {
  const tool = allTools.value.find((t) => t.name === toolName);
  return tool?.label || toolName;
};

/**
 * 处理工具点击
 */
const handleToolClick = (toolName: string) => {
  emit('tool-select', toolName);
};

/**
 * 处理重置
 */
const handleReset = () => {
  emit('reset');
};

/**
 * 处理清除标注
 */
const handleClearAnnotations = () => {
  emit('clear-annotations');
};

/**
 * 处理导出
 */
const handleExport = () => {
  emit('export');
};

// 暴露方法给父组件
defineExpose({
  getToolLabel,
});
</script>

<style scoped lang="scss">
.tool-bar {
  display: flex;
  align-items: center;
  background-color: #1e1e1e;
  padding: 8px;
  border-radius: 4px;

  &.vertical {
    flex-direction: column;
    
    .tool-group {
      width: 100%;
    }
  }
}

.tool-group {
  display: flex;
  gap: 4px;
}

.separator {
  width: 1px;
  height: 32px;
  background-color: #333;
  margin: 0 4px;
}

.vertical .separator {
  width: 100%;
  height: 1px;
  margin: 4px 0;
}

.tool-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  padding: 8px 12px;
  background-color: #2c2c2c;
  border-radius: 4px;
  font-size: 13px;

  .status-label {
    color: #999;
  }

  .status-value {
    color: #fff;
    font-weight: 500;
  }
}

.vertical .tool-status {
  margin-left: 0;
  margin-top: 16px;
  width: 100%;
  justify-content: center;
}

:deep(.q-btn) {
  min-width: 40px;
  min-height: 40px;
}
</style>





